<ui:composition template="/WEB-INF/template_page.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui" xmlns:b="http://bootsfaces.net/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
	
	<ui:define name="custom_css">
		<link href="#{request.contextPath}/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
		<link href="#{request.contextPath}/css/createevent.css" rel="stylesheet" />
	</ui:define>

	<ui:define name="title">
        MeteoCal - View Event
    </ui:define>

	<ui:define name="content">
		<div class="col-md-10 col-md-offset-1">
			<div class="page-header">
				<h1>View Event</h1>
			</div>
			
			<h:form class="form-horizontal" role="form">
				<fieldset>
		
					<div class="col-md-5">					
						<div class="form-group">
							<label class="col-sm-3 control-label" for="event-name">Event Name</label>
							<div class="col-sm-9">
								<c:if test="#{eventBean.isOwner}">
									<p:inputText type="text" class="form-control" name="event-name" id="event-name" placeholder="Event name" value="#{eventBean.event.name}" />
								</c:if>
								<c:if test="#{!eventBean.isOwner}">
									<h:outputText type="text" class="form-control" name="event-name" id="event-name" placeholder="Event name" value="#{eventBean.event.name}" />
								</c:if>
							</div>
						</div>
								
						<div class="form-group">
							<label class="col-sm-3 control-label" for="event-descr">Event Description</label>
							<div class="col-sm-9">
								<c:if test="#{eventBean.isOwner}">
									<p:inputTextarea type="text" class="form-control" name="event-descr" id="event-descr" placeholder="Event Description" value="#{eventBean.event.description}" />
								</c:if>
								<c:if test="#{!eventBean.isOwner}">
									<h:outputText type="text" class="form-control" name="event-descr" id="event-descr" placeholder="Event Description" value="#{eventBean.event.description}" />
								</c:if>
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-sm-3 control-label" for="event-location">Event Location</label>
							<div class="col-sm-9">
								<c:if test="#{eventBean.isOwner}">
									<input type="text" class="form-control" name="event-location" id="event-location" placeholder="Event location" value="#{eventBean.event.location}" />
									<b:selectOneMenu class="form-control select-location" id="select-location" value="#{eventBean.event.location}" />
								</c:if>
								<c:if test="#{!eventBean.isOwner}">
									<h:outputText type="text" class="form-control" name="event-location" id="event-location" placeholder="Event location" value="#{eventBean.event.location}" />
								</c:if>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label" for="day">Date and Time</label>
							<div class="col-sm-9">
								<c:if test="#{eventBean.isOwner}">
									<div class="input-append date form_datetime">
										<p:inputText class="form-control" size="16" type="text" readonly="readonly" value="#{eventBean.event.dateString}" />
										<span class="add-on"><i class="icon-th"></i></span>
									</div>
								</c:if>
								<c:if test="#{!eventBean.isOwner}">
									<h:outputText class="form-control" size="16" type="text" readonly="readonly" value="#{eventBean.event.dateString}" />
								</c:if>
							</div>
						</div>
		
						<div class="row">
							<label class="col-sm-3 control-label" for="type">Event Type</label>
							<div class="col-sm-9">
								<c:if test="#{eventBean.isOwner}">
									<p:inputSwitch onLabel="Outdoor" offLabel="Indoor" value="#{eventBean.event.outdoor}" />
								</c:if>
								<c:if test="#{!eventBean.isOwner}">
									<h:outputText class="form-control" size="16" type="text" readonly="readonly" value="#{eventBean.event.outdoorString}" />
								</c:if>
							</div>
						</div>
						
						<br />
		
						<div class="row">
							<label class="col-sm-3 control-label" for="privacy">Event Privacy</label>
							<div class="col-sm-9">
								<c:if test="#{eventBean.isOwner}">
									<p:inputSwitch onLabel="Public" offLabel="Private" value="#{eventBean.event.public}" />
								</c:if>
								<c:if test="#{!eventBean.isOwner}">
									<h:outputText class="form-control" size="16" type="text" readonly="readonly" value="#{eventBean.event.publicString}" />
								</c:if>
							</div>
						</div>
						
						<c:if test="#{eventBean.event.hasForecast}">
							<br />
			
							<div class="row">
								<label class="col-sm-3 control-label" for="privacy">Weather</label>
								<div class="col-sm-9">
									<h:outputText class="form-control" size="16" type="text" readonly="readonly" value="#{eventBean.event.forecast.typeString} (confidence : #{eventBean.event.forecast.confidence}/16)" />
								</div>
							</div>
						</c:if>
					</div>
		
		
					<div class="col-md-6 col-md-offset-1">		
						<div class="section-left panel panel-info">
							<div class="panel-heading">
								Invited people
							</div>
							
							<div class="non-invited panel-body">
								<c:if test="#{eventBean.isOwner}">
									<div style="display:none;">
										<p:selectManyMenu value="#{eventBean.event.invitedUsers}" converter="userConverter" var="s" filter="true" filterMatchMode="contains" showCheckbox="true">
											<f:selectItems value="#{eventCreationBean.allUsers}" var="t" itemLabel="#{t.firstName}-#{t.lastName}" itemValue="#{t}" />												
											<p:column>
												<h:outputText value="#{s.firstName} #{s.lastName}" />
											</p:column>
										</p:selectManyMenu>
									</div>
								</c:if>
								<ul class="list-group">
									<li class="list-group-item">
										<a href="#{request.contextPath}/user/user.xhtml?user=#{eventBean.event.owner.id}">
											<h:outputText size="16" type="text" readonly="readonly" value="#{eventBean.event.owner.firstName} #{eventBean.event.owner.lastName}" />
										</a>
									</li>
									<c:forEach items="#{eventBean.event.invitedUsers}" var="t">
										<li class="list-group-item">
											<a href="#{request.contextPath}/user/user.xhtml?user=#{t.id}">
												<h:outputText size="16" type="text" readonly="readonly" value="#{t.firstName} #{t.lastName}" />
											</a>
										</li>
									</c:forEach>
								</ul>
							</div>
						</div> <!-- /.user-list -->
					</div>
				</fieldset>
				
				<c:if test="#{eventBean.isOwner}">
					<div class="col-md-3 col-md-offset-9">
						<h:commandButton class="btn btn-lg btn-success btn-block" id="submitU" value="Update" action="#{eventBean.update()}" ajax="false" update="@all" >	
							<f:param name="event" value="#{param['event']}" />
						</h:commandButton>		
						<br/>	
	      				<h:messages  style="color:red"/>
      				</div>
   				</c:if>
			</h:form>
			<c:if test="#{eventBean.isOwner}">
				<h:form>
					<div class="col-md-3 col-md-offset-9">
						<h:commandButton class="btn btn-lg btn-danger btn-block" id="submitD" value="Delete" action="#{eventBean.delete()}" ajax="false" update="@all" >
							<f:param name="event" value="#{param['event']}" />
						</h:commandButton>
					</div>
				</h:form>
 			</c:if>
		</div>
	</ui:define>
	
	<ui:define name="custom_js">
		<script src="#{request.contextPath}/js/bootstrap-datetimepicker.min.js"></script>
		<script type="text/javascript">
			$(".form_datetime").datetimepicker({
				format: "dd/mm/yyyy-hh:ii"
			});
		</script>
		<script src="#{request.contextPath}/js/createevent.js"></script>
	</ui:define>
</ui:composition>